<template>
  <el-row>
    <el-col :span="24">
      <div>
        <div class="filter-content">
          <div class="filter-item" style="width: 100% ">
            <div class="label-content" style="display: flex !important;  justify-content: space-between !important;width: 100% ">
              <div>
                <el-input class="search-input-width   elliptical-input" v-model.trim="baseTable.tableReqDto.name" clearable placeholder="账号名称"></el-input>
                <el-select
                  v-model.trim="baseTable.tableReqDto.status"
                  clearable
                  placeholder="授权状态"
                  class="elliptical-select"
                  style="width: 150px; margin-left: 10px;">
                  <el-option
                    key="1"
                    label="授权成功"
                    value="AUTH"
                  ></el-option>
                  <el-option
                    key="2"
                    label="授权失败"
                    value="NOAUTH"
                  ></el-option>
                </el-select>
                <el-button style="margin-left: 10px;height: 34px" :auto-insert-space="true" type="primary" round @click="baseTable.onSearch">
                  <el-icon style="margin-right: 5px;height: 34px"><Search /></el-icon>搜索
                </el-button>
              </div>
              <div>
                <el-button style="margin-left: 20px" :auto-insert-space="true" type="warning" round @click="authorizeFormDialog.open"><el-icon style="margin-right: 5px"><Plus /></el-icon>授权店铺</el-button>
              </div>
            </div>
          </div>

        </div>
        <el-table class="custom-header-table-2" :data="baseTable.tableData" v-loading="baseTable.tableLoading" stripe style="width: 100%">
          <template v-for="(col,itemindex) in baseTable.tableColumns" :key="col.colKey">
            <el-table-column :header-align="col.align" :align="col.align" :prop="col.colKey" :label="col.title" :width="col.width">
              <template #default="{ row , $index}">
                <table-date-column v-if="col.date" :date="row[col.colKey]" />
                <template v-if="col.colKey === 'marketplace'">
                  <div class="text" >
                    <el-tag round style="margin-right: 10px;background-color: #F1F4F9; border-color: #DDDFE6;color: #888888" type="info" effect="dark" v-for="ite in row.marketplace" :key="ite.code">{{ ite.name }}</el-tag>
                  </div>
                </template>
                <template v-else-if="col.colKey === 'status'">
                  <div  :class="{ 'text-red': row.status != 'AUTH' }" class="text" v-text="row.errorMessage"></div>
                </template>
                <template v-else-if="col.colKey === 'opt'">
                  <div class="table-opt">
                    <el-tooltip effect="dark" content="重新授权" placement="top">
                      <el-link v-if="row.status !== 'AUTH'" @click="onReauthorization(row.id)" :underline="false" class="opt-item">
                        <el-icon><Aim /></el-icon>
                      </el-link>
                    </el-tooltip>
                  </div>
                </template>
                <template v-else-if="col.colKey === 'index'">
                  <div>{{ $index+1}}</div>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <table-pagination :pagination="baseTable.dataPagination" @change="baseTable.onPaginationChange" />
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import TablePagination from '@/plugins/pair/table-pagination.vue'
import { Aim ,Search,Plus} from '@element-plus/icons-vue'
import { useDefineTable, useDefineDialog } from '@/plugins/util/global-variable'
import { getStoreAuthorizeUrl, storeAuthorizeList } from '@/api/common'
import StoreAuthorizeForm from '@/views/user/store/store-authorize-form.vue'
import TableDateColumn from '@/plugins/pair/table-date-column.vue'

const baseTable = useDefineTable({
  tableReqDto: {
    name: '',
    regions: [],
  },
  request: storeAuthorizeList,
  tableColumns: [
    { colKey: 'index', title: '序号', width: '100' },
    { colKey: 'name', title: '账号名称', width: '200' },
    { colKey: 'regionName', title: '授权区域', align: 'left' },
    { colKey: 'marketplace', title: '站点',align: 'left' },
    { colKey: 'status', title: '授权状态', align: 'left' },
    { colKey: 'createTime', title: '添加时间', align: 'left',width: '200' , date: true },
    { colKey: 'authorizationTime', title: '授权时间', align: 'left',width: '200' ,  date: true },
    { colKey: 'opt', title: '操作', width: '150' ,  align: 'left' },
  ],
})

const authorizeFormDialog = useDefineDialog({
  title: '店铺授权',
  width: 500,
  component: {
    instance: StoreAuthorizeForm,
  },
  onConfirm: () => {},
})

const onReauthorization = (storeId) => {
  getStoreAuthorizeUrl(storeId).then((res) => {
    window.open(res.data)
  })
}
</script>
<style scoped lang="scss">
.text-red {
  color: #EA5E56; /* Element Plus 红色主题色 */
}

</style>
